<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div>
    <div class="date">
    </div>
    <div class="video">
      <div class="box_1">
        <div class="box1Left">
          <dv-border-box-10>
            <video loop src="../../assets/images/ceshi.mp4" autoplay></video>
          </dv-border-box-10>
        </div>
      </div>
      <div class="box_2">
        <div class="boxTop">
          <div class="box1Right">
            <ul>
              <li>
                <dl>
                  <dt>蛋鸡品种</dt>
                  <dd>53</dd>
                </dl>
              </li>
              <li>
                <dl>
                  <dt>鸡群日龄(天)</dt>
                  <dd>325</dd>
                </dl>
              </li>
              <li>
                <dl>
                  <dt>存栏数量(只)</dt>
                  <dd>40000</dd>
                </dl>
              </li>
            </ul>
          </div>
        </div>
        <div class="boxBottom">
          <ul>
            <li>
              <dl text @click="OutdoorTemperature = true">
                <dt>
                  <img src="../../assets/images/wenduji.png" alt="" />
                </dt>
                <dd>
                  <p>今日</p>
                  <p>室外温度</p>
                </dd>
              </dl>
            </li>
            <li>
              <dl text @click="Roomtemperature = true">
                <dt>
                  <img src="../../assets/images/wenduji.png" alt="" />
                </dt>
                <dd>
                  <p>30.6°C</p>
                  <p>室内温度</p>
                </dd>
              </dl>
            </li>
            <li>
              <dl text @click="humidness = true">
                <dt>
                  <img src="../../assets/images/wenduji.png" alt="" />
                </dt>
                <dd>
                  <p>31.0°C</p>
                  <p>湿度</p>
                </dd>
              </dl>
            </li>
            <li>
              <dl text @click="Carbondioxide = true">
                <dt>
                  <span class="iconfont icon-eryanghuatan1"></span>
                </dt>
                <dd>
                  <p>0°C</p>
                  <p>二氧化碳</p>
                </dd>
              </dl>
            </li>
            <li>
              <dl text @click="Negative = true">
                <dt>
                  <span
                    class="iconfont icon-fuya1"
                    style="margin-left: 15%"
                  ></span>
                </dt>
                <dd>
                  <p>0°C</p>
                  <p>负压</p>
                </dd>
              </dl>
            </li>
            <li>
              <dl text @click="ventilate = true">
                <dt>
                  <span
                    class="iconfont icon-tongfengliang"
                    style="margin-left: 20%"
                  ></span>
                </dt>
                <dd>
                  <p>0°C</p>
                  <p>通风量</p>
                </dd>
              </dl>
            </li>
            <li>
              <dl text @click="Watch = true">
                <dt>
                  <span
                    class="iconfont icon-yongshuileibifenxi"
                    style="margin-left: 20%"
                  ></span>
                </dt>
                <dd>
                  <p>0°C</p>
                  <p>用水量</p>
                </dd>
              </dl>
            </li>
            <li>
              <dl text @click="consumption = true">
                <dt>
                  <span
                    class="iconfont icon-leijiyongdian"
                    style="margin-left: 20%"
                  ></span>
                </dt>
                <dd style="padding-left: 0.5vw">
                  <p>0°C</p>
                  <p>用电量</p>
                </dd>
              </dl>
            </li>
            <li>
              <dl text @click="Materialcharge = true">
                <dt>
                  <span
                    class="iconfont icon-yongliao"
                    style="margin-left: 20%"
                  ></span>
                </dt>
                <dd>
                  <p>34.8°C</p>
                  <p>用料量</p>
                </dd>
              </dl>
            </li>
            <li>
              <dl text @click="Layingnumber = true">
                <dt>
                  <span
                    class="iconfont icon-chandan"
                    style="margin-left: 15%"
                  ></span>
                </dt>
                <dd style="padding-left: 3%">
                  <p>14pa</p>
                  <p>产蛋数</p>
                </dd>
              </dl>
            </li>
            <li>
              <dl text @click="Eggseed = true">
                <dt>
                  <span class="iconfont icon-jidan"></span>
                </dt>
                <dd>
                  <p>478ppm</p>
                  <p>蛋种</p>
                </dd>
              </dl>
            </li>
            <li>
              <dl text @click="Devicestatus = true">
                <dt>
                  <span
                    class="iconfont icon-shebeizhuangtai"
                    style="margin-left: 20%"
                  ></span>
                </dt>
                <dd>
                  <p>0%</p>
                  <p>设备状态</p>
                </dd>
              </dl>
            </li>
          </ul>
        </div>
      </div>
    </div>
      <el-dialog v-model="OutdoorTemperature" style="width: 50vw; height: 65vh; background: linear-gradient(to bottom,#00183e,#002d5b);">
        <div class="Outdoor">
          <dv-border-box12>
            <h4>室外温度</h4>
            <Outdoor></Outdoor>
          </dv-border-box12>
        </div>
      </el-dialog>
      <el-dialog v-model="Roomtemperature" style="width: 50vw; height: 65vh; background: linear-gradient(to bottom,#00183e,#002d5b);">
        <div class="Room">
          <dv-border-box12>
            <h4>室内温度1</h4>
            <Room_1></Room_1>
          </dv-border-box12>
        </div>
        <div class="Room">
          <dv-border-box12>
            <h4>室内温度2</h4>
            <Room_2></Room_2>
          </dv-border-box12>
        </div>
        <div class="Room">
          <dv-border-box12>
            <h4>室内温度3</h4>
            <Room_3></Room_3>
          </dv-border-box12>
        </div>
        <div class="Room">
          <dv-border-box12>
            <h4>室内温度4</h4>
            <Room_4></Room_4>
          </dv-border-box12>
        </div>
      </el-dialog>
      <el-dialog v-model="humidness" style="width: 50vw; height: 65vh; background: linear-gradient(to bottom,#00183e,#002d5b);">
        <div class="humidness">
          <dv-border-box12>
            <h4>今日湿度</h4>
            <Humidness></Humidness>
          </dv-border-box12>
        </div>
      </el-dialog>
      <el-dialog v-model="Carbondioxide" style="width: 50vw; height: 65vh; background: linear-gradient(to bottom,#00183e,#002d5b);">
        <div class="Carbondioxide">
          <dv-border-box12>
            <h4>二氧化碳</h4>
            <carbondioxide></carbondioxide>
          </dv-border-box12>
        </div>
      </el-dialog>
      <el-dialog v-model="Negative" style="width: 50vw; height: 65vh; background: linear-gradient(to bottom,#00183e,#002d5b);">
        <div class="Negative">
          <dv-border-box12>
            <h4>今日负压</h4>
            <negative></negative>
          </dv-border-box12>
        </div>
      </el-dialog>
      <el-dialog v-model="ventilate" style="width: 50vw; height: 65vh; background: linear-gradient(to bottom,#00183e,#002d5b);">
        <div class="ventilate">
          <dv-border-box12>
            <h4>今日通风量</h4>
            <Ventilate></Ventilate>
          </dv-border-box12>
        </div>
      </el-dialog>
      <el-dialog v-model="Watch" style="width: 50vw; height: 65vh; background: linear-gradient(to bottom,#00183e,#002d5b);">
        <div class="watch">
          <dv-border-box12>
            <h4>今日用水量</h4>
            <watch></watch>
          </dv-border-box12>
        </div>
      </el-dialog>
      <el-dialog v-model="consumption" style="width: 50vw; height: 65vh; background: linear-gradient(to bottom,#00183e,#002d5b);">
        <div class="consumption">
          <dv-border-box12>
            <h4>今日用电量</h4>
            <Consumption></Consumption>
          </dv-border-box12>
        </div>
      </el-dialog>
      <el-dialog v-model="Materialcharge" style="width: 50vw; height: 65vh; background: linear-gradient(to bottom,#00183e,#002d5b);">
        <div class="Materialcharge">
          <dv-border-box12>
            <h4>今日用料量</h4>
            <materialcharge></materialcharge>
          </dv-border-box12>
        </div>
      </el-dialog>
      <el-dialog v-model="Layingnumber" style="width: 50vw; height: 65vh; background: linear-gradient(to bottom,#00183e,#002d5b);">
        <div class="Layingnumber">
          <dv-border-box12>
            <h4>今日产蛋数</h4>
            <layingnumber></layingnumber>
          </dv-border-box12>
        </div>
      </el-dialog>
      <el-dialog v-model="Eggseed" style="width: 50vw; height: 65vh; background: linear-gradient(to bottom,#00183e,#002d5b);">
        <div class="Eggseed">
          <dv-border-box12>
            <h4>鸡蛋品种</h4>
            <eggseed></eggseed>
          </dv-border-box12>
        </div>
      </el-dialog>
      <el-dialog v-model="Devicestatus" style="width: 50vw; height: 65vh; background: linear-gradient(to bottom,#00183e,#002d5b);">
        <div class="Devicestatus">
          <dv-border-box12>
            <h4>设备状态</h4>
            <devicestatus></devicestatus>
          </dv-border-box12>
        </div>
      </el-dialog>
    </div>
</template>
  
<script lang="ts" setup>
import { reactive, ref } from "vue";
const OutdoorTemperature = ref(false);
const Roomtemperature = ref(false);
const humidness = ref(false);
const Carbondioxide = ref(false);
const Negative = ref(false);
const ventilate = ref(false);
const Watch = ref(false);
const consumption = ref(false);
const Materialcharge = ref(false);
const Layingnumber = ref(false);
const Eggseed = ref(false);
const Devicestatus = ref(false);
import Outdoor from "../Henhouse/Echarts/EchartsLeft/OutdoorTemperature.vue";
import Room_1 from "./Echarts/Room/Room_1.vue";
import Room_2 from "./Echarts/Room/Room_2.vue";
import Room_3 from "./Echarts/Room/Room_3.vue";
import Room_4 from "./Echarts/Room/Room_4.vue";
import Humidness from "./Echarts/EchartsLeft/Humidness.vue";
import carbondioxide from "./Echarts/EchartsLeft/Carbondioxide.vue";
import negative from "./Echarts/EchartsLeft/Negative.vue";
import Ventilate from "./Echarts/EchartsLeft/Ventilate.vue";
import watch from "./Echarts/EchartsLeft/Watch.vue";
import Consumption from "./Echarts/EchartsLeft/consumption.vue";
import materialcharge from "./Echarts/EchartsLeft/Materialcharge.vue";
import layingnumber from "./Echarts/EchartsLeft/Layingnumber.vue";
import eggseed from "./Echarts/EchartsLeft/Eggseed.vue";
import devicestatus from "./Echarts/EchartsLeft/Devicestatus.vue";


</script>

<style scoped>
.date {
  width: 100%;
  height: 8vh;
}

.TimeDisplay {
  width: 100%;
  height: 7vh;
  border: none;
  text-align: center;
  font-size: calc(100vw * 32 / 1920);
  font-weight: bold;
  border-top: 2px solid;
  margin-top: 2vh;
  border-image: linear-gradient(
      to right,
      transparent 20%,
      #00b7de 20%,
      #00b7de 80%,
      transparent 80%
    )
    1 / auto 2px stretch;
}

.video {
  width: 90%;
  height: 78vh;
}

.box_1 {
  width: 100%;
  height: 60%;
}

.box_2 {
  width: 100%;
  height: 40%;
  /* background: chartreuse; */
}

.box1Left {
  width: 100%;
  height: 100%;
  float: left;
}

.box1Left video {
  width: 90%;
  height: 90%;
  margin-left: 1.8vw;
  margin-top: 2vh;
}

.box1Right {
  width: 100%;
  height: 100%;
  float: left;
}

.box1Right ul {
  width: 100%;
  height: 100%;
}

.box1Right ul li {
  float: left;
  width: 33.33%;
  height: 100%;
}

.box1Right ul li dl {
  width: 100%;
  height: 100%;
}

.box1Right ul li dl dt {
  width: 100%;
  height: 50%;
  text-align: center;
  line-height: 12vh;
  font-weight: bold;
  font-size: calc(100vw * 18 / 1920);
  color: #25ebe8;
}

.box1Right ul li dl dd {
  width: 100%;
  height: 50%;
  text-align: center;
  font-weight: bold;
  line-height: 8vh;
  font-size: calc(100vw * 18 / 1920);
  color: #d79322;
}

.boxTop {
  width: 100%;
  height: 40%;
  /* background: pink; */
}

.boxBottom {
  width: 100%;
  height: 60%;
  /* background: chocolate; */
}

.boxBottom ul {
  width: 100%;
  height: 100%;
}

.boxBottom ul li {
  width: 15%;
  height: 40%;
  float: left;
  margin-top: 0.8%;
  margin-left: 1%;
  /* background: chartreuse; */
}

.move-right {
  text-align: center;
  padding-right: 5%;
}

.boxBottom ul li dl {
  width: 100%;
  height: 100%;
}

.boxBottom ul li dl dt {
  width: 50%;
  height: 100%;
  float: left;
  color: #000;
}

.boxBottom ul li dl dt span {
  font-size: calc(100vw * 35 / 1920);
  padding-left: 20%;
  display: inline-block;
  padding-top: 27%;
  color: #42fffe;
}

.boxBottom ul li dl dt img {
  width: 100%;
  height: 50%;
  margin-top: 40%;
  margin-left: 20%;
}

.boxBottom ul li dl dd {
  width: 50%;
  height: 100%;
  float: left;
}

.boxBottom ul li dl dd p {
  width: 100%;
  height: 30%;
  line-height: 7vh;
  font-size: calc(100vw * 12 / 1920);
  color: rgb(0, 255, 234);
}

.Outdoor {
  width: 43vw;
  height: 42vh;
  margin-left: 2.5vw;
  margin-top: 5vh;
}

.Outdoor h4 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}

.Room {
  width: 22vw;
  height: 20vh;
  float: left;
  margin-left: 1.5vw;

  /* margin-left: 0.5vw; */
}

.Room h4 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}

.humidness {
  width: 43vw;
  height: 42vh;
  margin-left: 2.5vw;
  margin-top: 5vh;
}

.humidness h4 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}

.Carbondioxide {
  width: 43vw;
  height: 42vh;
  margin-left: 2.5vw;
  margin-top: 5vh;
}

.Carbondioxide h4 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}

.Negative {
  width: 43vw;
  height: 42vh;
  margin-left: 2.5vw;
  margin-top: 5vh;
}

.Negative h4 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}

.ventilate {
  width: 43vw;
  height: 42vh;
  margin-left: 2.5vw;
  margin-top: 5vh;
}

.ventilate h4 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}

.watch {
  width: 43vw;
  height: 42vh;
  margin-left: 2.5vw;
  margin-top: 5vh;
}

.watch h4 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}

.consumption {
  width: 43vw;
  height: 42vh;
  margin-left: 2.5vw;
  margin-top: 5vh;
}

.consumption h4 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}

.Materialcharge {
  width: 43vw;
  height: 42vh;
  margin-left: 2.5vw;
  margin-top: 5vh;
}

.Materialcharge h4 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}

.Layingnumber {
  width: 43vw;
  height: 42vh;
  margin-left: 2.5vw;
  margin-top: 5vh;
}

.Layingnumber h4 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}

.Eggseed {
  width: 43vw;
  height: 42vh;
  margin-left: 2.5vw;
  margin-top: 5vh;
}

.Eggseed h4 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}

.Devicestatus {
  width: 43vw;
  height: 42vh;
  margin-left: 2.5vw;
  margin-top: 5vh;
}

.Devicestatus h4 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}

</style>